<script setup lang="ts">
  import { ref, useTemplateRef } from 'vue'
  import { useQuasar } from 'quasar'

  import CudTable, { type TQTableColumns, type TRequestParam } from '@/components/CudTable.vue'
  import { getUserPageList, editUserRole, type IUserQueryParams } from '@/api'

  const $q = useQuasar()
  const filter = ref('')

  const tableRef = useTemplateRef('userTable')
  const columns: TQTableColumns = [
    {
      name: 'username',
      label: '用户ID',
      field: 'username',
      align: 'left',
      format: (val, row) => val || row.openId
    },
    { name: 'name', label: '用户名称', field: 'name', align: 'left' },
    { name: 'phoneNumber', label: '电话', field: 'phoneNumber', align: 'left' },
    { name: 'role', label: '角色', field: 'role', align: 'left' }
  ]
  function request(context: TRequestParam) {
    const { page, rowsPerPage } = context.pagination
    const params: IUserQueryParams = { pageNum: page, pageSize: rowsPerPage }
    if (filter.value !== '') {
      params.name = filter.value
    }
    return getUserPageList(params)
  }

  async function onChangeRole(v: string, row: any) {
    const ov = row.role
    const res = await editUserRole({ userId: row.userId, role: v })
    if (res.data && res.data.code === 200) {
      $q.notify({
        type: 'positive',
        message: res.data.message || '角色修改成功'
      })
    } else {
      $q.notify({
        color: 'red-5',
        textColor: 'white',
        icon: 'warning',
        message: res.data.message || '角色修改失败'
      })
      row.role = ov
    }
    console.log(tableRef.value)
  }

  function onKeyInput(event: KeyboardEvent) {
    if (event.key.toLowerCase() === 'enter') {
      // 13 为回车键
      if (tableRef.value) {
        tableRef.value.refreshUserTable(1)
      }
    }
  }
  function onSearch() {
    if (tableRef.value) {
      tableRef.value.refreshUserTable(1)
    }
  }
</script>

<template>
  <q-page class="bg-[#FAFCFF] p-5">
    <CudTable
      ref="userTable"
      class="bg-white p-5"
      title="用户管理"
      row-key="userId"
      :columns="columns"
      :request="request">
      <template v-slot:body-cell-role="{ row }">
        <q-td>
          <q-radio
            dense
            class="q-ml-lg"
            @update:model-value="v => onChangeRole(v, row)"
            v-model="row.role"
            val="USER"
            label="普通" />
          <q-radio
            dense
            class="q-ml-lg"
            @update:model-value="v => onChangeRole(v, row)"
            v-model="row.role"
            val="ADMIN"
            label="管理员" />
          <q-radio
            dense
            class="q-ml-lg"
            @update:model-value="v => onChangeRole(v, row)"
            v-model="row.role"
            val="TENANT"
            label="租户" />
          <q-radio
            dense
            class="q-ml-lg"
            @update:model-value="v => onChangeRole(v, row)"
            v-model="row.role"
            val="MAINTENANCE_WORKER"
            label="维修工" />
        </q-td>
      </template>
      <template v-slot:top-right>
        <q-input
          outlined
          dense
          @keydown="onKeyInput"
          v-model="filter"
          placeholder="请输入用户名称查询">
          <template v-slot:append>
            <q-icon name="search" @click="onSearch" />
          </template>
        </q-input>
      </template>
    </CudTable>
  </q-page>
</template>

<style scoped></style>
